<template>
  <div class="page-container">
    <div class="category-content">
      <!-- 分类头部 -->
      <div class="category-header card">
        <div class="header-content">
          <div class="category-info">
            <el-icon :size="48" class="category-icon" :class="currentCategory.color">
              <component :is="currentCategory.icon" />
            </el-icon>
            <div class="category-text">
              <h1>{{ currentCategory.name }}</h1>
              <p>{{ currentCategory.description }}</p>
            </div>
          </div>
          <div class="category-stats">
            <div class="stat-item">
              <h3>{{ currentCategory.courseCount }}</h3>
              <p>课程数量</p>
            </div>
            <div class="stat-item">
              <h3>{{ currentCategory.studentCount }}</h3>
              <p>学习人数</p>
            </div>
            <div class="stat-item">
              <h3>{{ currentCategory.teacherCount }}</h3>
              <p>讲师数量</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 筛选工具栏 -->
      <div class="filter-bar card">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-select v-model="filters.level" placeholder="难度等级" class="filter-item">
              <el-option label="全部" value="" />
              <el-option label="入门" value="beginner" />
              <el-option label="中级" value="intermediate" />
              <el-option label="高级" value="advanced" />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select v-model="filters.sort" placeholder="排序方式" class="filter-item">
              <el-option label="最新" value="newest" />
              <el-option label="最热" value="hottest" />
              <el-option label="评分最高" value="rating" />
            </el-select>
          </el-col>
          <el-col :span="12">
            <el-input
              v-model="filters.keyword"
              placeholder="搜索课程"
              class="filter-item"
              :prefix-icon="Search"
            />
          </el-col>
        </el-row>
      </div>

      <!-- 课程列表 -->
      <div class="course-list">
        <el-row :gutter="20">
          <el-col :span="8" v-for="course in filteredCourses" :key="course.id">
            <div class="course-card card" @click="goToCourse(course.id)">
              <div class="course-image">
                <img :src="course.img" :alt="course.title">
                <div class="course-level" :class="course.level">{{ course.levelText }}</div>
                <div class="course-tag" v-if="course.isNew">新课</div>
              </div>
              <div class="course-content">
                <h3>{{ course.title }}</h3>
                <p class="course-desc">{{ course.desc }}</p>
                <div class="course-info">
                  <div class="teacher">
                    <el-avatar :size="24" :src="course.teacherAvatar" />
                    <span>{{ course.teacher }}</span>
                  </div>
                  <div class="course-meta">
                    <span class="students">
                      <el-icon><UserFilled /></el-icon>
                      {{ course.students }}人学习
                    </span>
                    <span class="rating">
                      <el-icon><Star /></el-icon>
                      {{ course.rating }}
                    </span>
                  </div>
                </div>
                <div class="course-footer">
                  <div class="tags">
                    <span class="tag" v-for="tag in course.tags" :key="tag">{{ tag }}</span>
                  </div>
                  <div class="price" v-if="course.price > 0">
                    ¥{{ course.price }}
                  </div>
                  <div class="price free" v-else>
                    免费
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[12, 24, 36, 48]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Search, UserFilled, Star } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 当前分类信息
const currentCategory = ref({
  id: 1,
  name: '前端开发',
  icon: 'Monitor',
  color: 'blue',
  description: '从HTML到Vue3，系统学习前端开发技能',
  courseCount: 128,
  studentCount: 25600,
  teacherCount: 32
})

// 筛选条件
const filters = ref({
  level: '',
  sort: 'newest',
  keyword: ''
})

// 分页
const currentPage = ref(1)
const pageSize = ref(12)
const total = ref(128)

// 课程列表
const courses = ref([
  {
    id: 1,
    title: 'Vue3 实战教程',
    desc: '从入门到精通，掌握Vue3开发技能',
    teacher: '张老师',
    teacherAvatar: 'https://picsum.photos/200/200?random=1',
    img: 'https://picsum.photos/400/300?random=1',
    students: 1234,
    rating: 4.9,
    level: 'beginner',
    levelText: '入门',
    isNew: true,
    tags: ['Vue3', '前端', 'JavaScript'],
    price: 199
  },
  {
    id: 2,
    title: 'React 高级教程',
    desc: '深入学习React核心概念和最佳实践',
    teacher: '李老师',
    teacherAvatar: 'https://picsum.photos/200/200?random=2',
    img: 'https://picsum.photos/400/300?random=2',
    students: 2345,
    rating: 4.8,
    level: 'advanced',
    levelText: '高级',
    tags: ['React', '前端', 'TypeScript'],
    price: 299
  },
  {
    id: 3,
    title: 'TypeScript 入门到精通',
    desc: '系统学习TypeScript，提升代码质量',
    teacher: '王老师',
    teacherAvatar: 'https://picsum.photos/200/200?random=3',
    img: 'https://picsum.photos/400/300?random=3',
    students: 3456,
    rating: 4.7,
    level: 'intermediate',
    levelText: '中级',
    tags: ['TypeScript', '前端'],
    price: 0
  }
])

// 过滤后的课程列表
const filteredCourses = computed(() => {
  return courses.value.filter(course => {
    if (filters.value.level && course.level !== filters.value.level) return false
    if (filters.value.keyword && !course.title.includes(filters.value.keyword)) return false
    return true
  })
})

// 页面加载时获取分类信息
onMounted(() => {
  const categoryId = route.params.id
  // TODO: 根据categoryId获取分类信息
})

function goToCourse(id) {
  router.push(`/course/${id}`)
}

function handleSizeChange(val) {
  pageSize.value = val
  // TODO: 重新加载数据
}

function handleCurrentChange(val) {
  currentPage.value = val
  // TODO: 重新加载数据
}
</script>

<style scoped>
.category-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.category-header {
  margin-bottom: 20px;
  padding: 30px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.category-icon {
  padding: 20px;
  border-radius: 16px;
}

.category-icon.blue {
  color: var(--primary-color);
  background: rgba(79, 172, 254, 0.1);
}

.category-text h1 {
  margin: 0 0 8px;
  font-size: 28px;
  color: var(--text-primary);
}

.category-text p {
  margin: 0;
  color: var(--text-secondary);
}

.category-stats {
  display: flex;
  gap: 40px;
}

.stat-item {
  text-align: center;
}

.stat-item h3 {
  margin: 0 0 4px;
  font-size: 24px;
  color: var(--text-primary);
}

.stat-item p {
  margin: 0;
  color: var(--text-secondary);
}

.filter-bar {
  margin-bottom: 20px;
  padding: 20px;
}

.filter-item {
  width: 100%;
}

.course-list {
  margin-bottom: 20px;
}

.course-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform var(--transition-duration) ease;
}

.course-card:hover {
  transform: translateY(-5px);
}

.course-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-duration) ease;
}

.course-card:hover .course-image img {
  transform: scale(1.05);
}

.course-level {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

.course-level.beginner {
  background: #67c23a;
}

.course-level.intermediate {
  background: #e6a23c;
}

.course-level.advanced {
  background: #f56c6c;
}

.course-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #f56c6c;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.course-content {
  padding: 20px;
}

.course-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--text-primary);
}

.course-desc {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  height: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.course-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.teacher {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 14px;
}

.course-meta {
  display: flex;
  gap: 12px;
  color: var(--text-light);
  font-size: 14px;
}

.course-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.course-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tags {
  display: flex;
  gap: 8px;
}

.tag {
  padding: 2px 8px;
  background: rgba(79, 172, 254, 0.1);
  color: var(--primary-color);
  border-radius: 4px;
  font-size: 12px;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #f56c6c;
}

.price.free {
  color: #67c23a;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
</style> 